<template>
    <view>
      

        <view class="search">
            <u-search class="left" placeholder="请输增值服务名称" @change="selectcard" :bgColor="searchstyle"
                :borderColor="borderstyle" :showAction="false" v-model="keyword"></u-search>
            <view class="backtop">
                <u-button type="primary" @click="topback" class="custom-style" :plain="true" size="mini"
                    text="刷新"></u-button>
            </view>

        </view>


        <view v-if="empty == 'isempty'" class="empty">
            <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">

            </u-empty>
        </view>
        <view class="section">
            <u-list :scrollTop="60" height="620" :style="height" :enableBackToTop="true" v-if="empty == 'notempty'"
                :preLoadScreen="page * 5" @scrolltolower="scrolltolower" :pagingEnabled="true">

                <u-list-item v-for="item in serviceslist" :key=item.id>
                    <u-swipe-action>
                        <u-swipe-action-item @click="action" :name="item.id" :options="options">
                            <view class="card" @click="toEdit(item.id)">
                                <view class="left">
                                    <view class="img">
                                        <u-image :src="item.image_text" width="80px" height="80px">
                                            <template v-slot:loading>
                                                <u-loading-icon color="red"></u-loading-icon>
                                            </template>
                                        </u-image>
                                    </view>
                                </view>
                                <view class="right">
                                    <view class="text flax">
                                        <h5>服务标题:</h5>
                                        <span class="flax-span">{{ item.name }}</span>

                                    </view>
                                    
                                    <view class="text">
                                        <span>服务费用:</span>
                                        <span>{{ item.free }}</span>

                                    </view>
                                    <view class="text">
                                        <span>创建时间:</span>
                                        <span>{{ item.createtime_text }}</span>

                                    </view>
                                    
                                    <view class="text">
                                        <span>服务简介:</span>
                                        <span>{{ item.content }}</span>

                                    </view>
                                    

                                </view>
                            </view>

                        </u-swipe-action-item>


                    </u-swipe-action>

                </u-list-item>

                <u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
                    :nomore-text="nomoreText" />






            </u-list>
        </view>
        <!-- 消息提醒 -->
        <u-toast ref="notice"></u-toast>

        <!-- 模态框 -->
        <u-modal :show="show" :content="content" showCancelButton @confirm="confirm" @cancel="cancel" />

        <view class="btnstyle">
      <u-button
        type="primary"
        class="custom-style"
        @click="addzengzhi"
        text="添加增值服务"
      ></u-button>
    </view>


    </view>
</template>

<script>
export default {
    onLoad() {
        this.auth = this.$u.auth.check()

        this.list()

    },
    created() {

        this.timer = setInterval(() => {

            let a = this.$u.count.check()

        }, 15000);

    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    data() {
        return {
            status: 'loadmore',
            loadingText: '努力加载中',
            loadmoreText: '下拉加载更多',
            nomoreText: '没有更多数据了',
            typeid:0,
            padding: '150rpx 0rpx',
            options: [

                {
                    text: "添加",
                    style: {
                        backgroundColor: "#3c9cff",
                    },
                },
                {
                    text: "销毁",
                    style: {
                        backgroundColor: "#f56c6c",
                    },
                },
            ],
            content: "是否销毁该商品",

            auth: {},
            page: 1,
            empty: "",
            addserid:0,
            keyword: '',
            searchstyle: "#ffffff",
            borderstyle: "#eee",
            serviceslist: [],
            addserid: 0,
            show: false,
           



        }
    },
    methods: {
        action(item) {
            // 添加
            if (item.index == 0) {
                uni.$u.route({
                    url: "/pagesC/addservices/add",
                })
            }
            // 销毁
            if (item.index == 1) {
                this.show = true
                this.addserid = item.name
            }

        },
        async confirm() {
            this.show = false

            var data = {
                addserid: this.addserid,
                adminid: this.auth.id
            }


            var result = await this.$u.api.product.deladdservices(data)

            if (result.code) {
                this.$refs.notice.show({
                    type: "success",
                    message: result.msg,
                    duration: 2000,
                    complete: () => {
							uni.$u.route({
								type: "reLaunch",
								url: "/pagesC/addservices/index",

							})
						}

                })
          


            } else {
                this.$refs.notice.show({
                    type: "error",
                    message: result.msg,
                    duration: 2000
                })
            }

        },
        cancel() {
            this.show = false
        },

        delete() {
            uni.showModal({
                title: '温馨提示',
                content: '确定要销毁吗？',
                success: res => {
                    if (res.confirm) {
                        this.show1 = false
                    }
                }
            })
        },

        addzengzhi()
        {
            uni.$u.route({
                    url: "/pagesC/addservices/add",
                })
        },
        selectcard(e) {
             this.serviceslist = []

            this.page = 1

            // 直接赋值
            this.keyword = e
            // 然后调用
            this.list()

        },
        async list(e) {
            // 最高管理员需传输的数据
            let data = {
                stoid: this.auth.stoid,
                page: this.page,
                keyword: this.keyword,
                addserid: this.addserid,
                adminid:this.auth.id,
                typeid:e

            }
            var result = await this.$u.api.product.addserviceslist(data);



            if (result.code) {

                    this.empty = "notempty"


                if (Array.isArray(result.data) && result.data.length > 0) {

                    this.serviceslist = this.serviceslist.concat(result.data)
                    
                 

                    this.page++




                } else {
                    this.status = "nomore"
                    // this.empty = "isempty"


                }

            }


        },
     
      
        
        toEdit(addserid) {
            this.$u.route(
                `/pagesC/addservices/edit`, {
                addserid: addserid,

            })
        },
        scrolltolower() {

      

            this.list()

        },
        async topback(){
           this.list(this.addserid)
        }


    }
}
</script>

<style scoped  lang="scss" >
.section {
    margin: 60px 0px;
}

.backtop {
    width: 20px;
    color: "blue";
    margin-left: 15px;
}

.empty {
    margin-top: 50px;
}

.search {
    width: 70%;
    position: fixed;
    top: 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 9%;
    z-index: 999;

}


.card {
    display: flex;
    width: 92%;
    height: 135px;
    margin: 0 auto;
    border-radius: 2%;
    border: 1px solid #eee;
    margin-top: 20px;
    box-shadow: 2px 2px 2px #eee, 2px 2px 2px #eee;

    .left {
        .img {
            padding: 22px;
        }
    }

    .right {
        width: 62%;
        margin-top: 23px;

        .text {
            h5 {
                // 超出一定长度变成三个点
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }

            span {
                font-size: 12px;
                color: #888
            }

            span:nth-of-type(2) {
                padding-left: 10px;
            }
        }
    }
}



.content {
    background: #ffffff;
}
.flax{
    display: flex;
    align-items: center;
   .flax-span{
    font-size: 14px!important;
    color: #000!important;
   }
}
.btnstyle {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>